<template>
  <div class="baseCommon card">
    <div class="title">标签</div>
    <ul class="clearfix label-list">
      <li v-for="item in label_list" :key="item.title">
        <router-link
          :to="{
          path: '/label',
          query: {
            id: item.id,
            title: item.title
          }
        }"
        >{{item.title}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
export default {
  data() {
    return {
      label_list: "",
      label_url: "/Essay/label_pagination/1/50"
    };
  },
  mounted() {
    this.$http.get(this.domain + this.label_url).then(
      res => {
        this.label_list = res.data;
      },
      res => {
        this.$router.push({ path: "/error" });
      }
    );
  }
};
</script>
<style scoped rel="stylesheet/stylus" lang="stylus">
ul.label-list {
  padding: 0;
}

.label-list li {
  float: left;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin: 5px;
  list-style: none;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.5);
}
</style>
